<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>良率分析 - 智能制造分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { DEFAULT: '#1890ff' },
                        success: { DEFAULT: '#52c41a' },
                        warning: { DEFAULT: '#faad14' },
                        error: { DEFAULT: '#f5222d' }
                    }
                }
            }
        }
    </script>
    <style>
        .ant-layout { min-height: 100vh; }
        .ant-layout-sider { background: #001529; }
        .ant-menu { background: transparent; }
        .ant-menu-item { color: rgba(255,255,255,0.65); }
        .ant-menu-item:hover { color: #fff; }
        .ant-menu-item-selected { color: #fff; background: #1890ff; }
        .ant-card { border-radius: 2px; border: 1px solid #f0f0f0; }
        .ant-card-head { border-bottom: 1px solid #f0f0f0; padding: 16px 24px; }
        .ant-table { border-radius: 2px; }
        .ant-table-thead > tr > th { background: #fafafa; font-weight: 500; }
        .ant-btn { border-radius: 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.015); }
        .ant-alert { border-radius: 2px; }
    </style>
</head>
<body class="bg-[#f0f2f5]">
<div class="ant-layout">
    <!-- 侧边栏 -->
    <aside class="fixed inset-y-0 left-0 w-64 bg-[#001529] text-white">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-center h-16 border-b border-white/10">
                <i class="fas fa-industry text-primary-400 text-2xl"></i>
                <span class="ml-2 text-xl font-medium">智能制造分析</span>
            </div>
            <nav class="flex-1 px-4 py-4 space-y-1">
                <a href="dashboard.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-chart-line w-5 h-5"></i>
                    <span class="ml-3">生产监控</span>
                </a>
                <a href="yield_analysis.html" class="flex items-center px-4 py-2 text-white bg-primary-500 rounded">
                    <i class="fas fa-chart-pie w-5 h-5"></i>
                    <span class="ml-3">良率分析</span>
                </a>
                <a href="equipment_maintenance.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-tools w-5 h-5"></i>
                    <span class="ml-3">设备维护</span>
                </a>
                <a href="data_source.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-database w-5 h-5"></i>
                    <span class="ml-3">数据源配置</span>
                </a>
                <a href="system_settings.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-cog w-5 h-5"></i>
                    <span class="ml-3">系统设置</span>
                </a>
            </nav>
        </div>
    </aside>
    <!-- 主内容区 -->
    <main class="ml-64 p-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-medium text-gray-900">良率分析</h1>
            <div class="flex items-center space-x-4">
                <button class="inline-flex items-center px-4 py-2 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600">
                    <i class="fas fa-download mr-2"></i> 导出报表
                </button>
            </div>
        </div>
        <!-- 筛选区 -->
        <div class="bg-white rounded border border-gray-200 p-6 shadow-sm mb-8 flex flex-wrap gap-4 items-center">
            <div>
                <label class="block text-sm text-gray-600 mb-1">生产线</label>
                <select class="ant-btn px-3 py-2 border border-gray-300 bg-white text-gray-700 rounded">
                    <option>全部</option>
                    <option>生产线A</option>
                    <option>生产线B</option>
                    <option>生产线C</option>
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">产品型号</label>
                <select class="ant-btn px-3 py-2 border border-gray-300 bg-white text-gray-700 rounded">
                    <option>全部</option>
                    <option>型号X</option>
                    <option>型号Y</option>
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">日期</label>
                <input type="date" class="ant-btn px-3 py-2 border border-gray-300 bg-white text-gray-700 rounded" />
            </div>
            <button class="ant-btn px-4 py-2 bg-primary-500 text-white hover:bg-primary-600 ml-4">
                <i class="fas fa-search mr-2"></i> 查询
            </button>
        </div>
        <!-- 良率趋势分析 -->
        <div class="bg-white rounded border border-gray-200 shadow-sm mb-8">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">良率趋势分析</h3>
            </div>
            <div class="p-6">
                <div id="yieldTrendChart" class="h-80"></div>
            </div>
        </div>
        <!-- 异常原因分析 -->
        <div class="bg-white rounded border border-gray-200 shadow-sm mb-8">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">异常原因分析</h3>
            </div>
            <div class="p-6">
                <div id="causeAnalysisChart" class="h-80"></div>
            </div>
        </div>
        <!-- 异常记录表 -->
        <div class="bg-white rounded border border-gray-200 shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">异常记录</h3>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">生产线</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产品型号</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常类型</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">影响等级</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因分析</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 10:15</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">生产线A</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">型号X</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">设备异常</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">高</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电机过热</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-warning-50 text-warning-600">处理中</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-19 15:30</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">生产线B</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">型号Y</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">原材料异常</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">中</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">原料批次不合格</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-success-50 text-success-600">已处理</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-18 09:45</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">生产线C</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">型号X</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">工艺参数异常</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">低</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">温度偏高</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-error-50 text-error-600">未处理</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
<script>
    // 良率趋势图
    var yieldTrendChart = echarts.init(document.getElementById('yieldTrendChart'));
    var yieldTrendOption = {
        title: { text: '良率趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['实际良率', '目标良率'], top: 30 },
        xAxis: { type: 'category', data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'] },
        yAxis: { type: 'value', min: 80, max: 100, axisLabel: { formatter: '{value}%' } },
        series: [
            { name: '实际良率', type: 'line', smooth: true, data: [92, 94, 91, 95, 93, 96, 97], itemStyle: { color: '#1890ff' } },
            { name: '目标良率', type: 'line', smooth: true, data: [95, 95, 95, 95, 95, 95, 95], itemStyle: { color: '#52c41a' }, lineStyle: { type: 'dashed' } }
        ]
    };
    yieldTrendChart.setOption(yieldTrendOption);
    // 异常原因分析
    var causeAnalysisChart = echarts.init(document.getElementById('causeAnalysisChart'));
    var causeOption = {
        title: { text: '异常原因分布', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
        legend: { orient: 'vertical', left: 'left', data: ['人员操作', '设备故障', '原材料', '工艺参数', '其他'] },
        series: [{
            name: '异常原因',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: [
                { value: 6, name: '人员操作', itemStyle: { color: '#faad14' } },
                { value: 4, name: '设备故障', itemStyle: { color: '#f5222d' } },
                { value: 3, name: '原材料', itemStyle: { color: '#1890ff' } },
                { value: 2, name: '工艺参数', itemStyle: { color: '#52c41a' } },
                { value: 1, name: '其他', itemStyle: { color: '#bfbfbf' } }
            ]
        }]
    };
    causeAnalysisChart.setOption(causeOption);
    window.addEventListener('resize', function() {
        yieldTrendChart.resize();
        causeAnalysisChart.resize();
    });
</script>
</body>
</html> 